<!--
 * @Author: your name
 * @Date: 2020-08-20 14:46:43
 * @LastEditTime: 2020-08-20 16:19:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\users\Update.vue
-->
<template>
    <div>
        <el-form ref="userform" :model="user" label-width="80px">
            <el-form-item label="用户名">
                <el-input size="small" v-model="user.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input  size="small" v-model="user.userEmail"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input  size="small" v-model="user.userPhone"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch  v-model="user.isUse" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>        
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="updateUser" >保存</el-button>
                <el-button size="small" @click="cancel">返回</el-button>
            </el-form-item>    
        </el-form>
    </div>
</template>

<script>
import {userEdit} from '@/api/index'
export default {
    name: 'userEdit',
    props:{
        userDetails:{
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            user:{
                userAccount: '',
                userEmail: '',
                userId: 0,
                userLastLoginTime: '',
                userPhone: '',
                userStatus: 0,//状态
                isUse:false
            },
        }
    },
    methods: {
        updateUser(){
            //验证并有加载效果

            this.user.userStatus = this.user.isUse == true ? 1:0;
            console.log(this.user);
            userEdit(this.user).then((result) => {
                if(result.status == 200){
                    //保存token 到 localStorage
                    this.$message({
                        message: '修改成功!',
                        type: 'success',
                        duration: 2000,
                    });
                    //关闭弹出框
                    this.$emit("closeDialog");
                } 
            })
            
        },
        cancel(){
           this.$emit("closeDialog");
        },
        transParam(obj){
            this.user.userAccount = obj.userAccount;
            this.user.userEmail = obj.userEmail;
            this.user.userId = obj.userId;
            this.user.userLastLoginTime = obj.userLastLoginTime;
            this.user.userPhone = obj.userPhone;
            this.user.userStatus = obj.userStatus;
            this.user.isUse = this.userDetails.userStatus == 1?true:false;
        }
    },
    mounted() {
        this.transParam(this.userDetails);
    },
    watch: {
        userDetails(newObj,oldObj){
            this.transParam(newObj);
        }
    },
}
</script>

<style scoped>
    
</style>